/**
 * The box user-interface component class
 * @class syslib.ui.Box
 * @author Gabriel Ricci
 */
syslib.ui.Box = __class(syslib.ui.VisualTag, 
	/**
	 * @lends syslib.ui.Box
	 */
	{
	_OPENED : 1, 
	_CLOSED : 2, 

	id : null,
	status : this._OPENED, 
	bodyStyle : null,
	lastHeight : 0, 

	prepare : function(){
		// load the style
		syslib.loadStyleForComponent("box");
		
		// get the tag attributes
		var attributes = this.__attributes;

		// class attributres
		this.id = (syslib.util.valid(attributes.id)) ? attributes.id : 'syslib_box_' + Math.floor(Math.random() * 10001);
		this.bodyStyle = (syslib.util.valid(attributes.bodyStyle)) ? attributes.bodyStyle : "";
		
		// set the status
		this.status = this._OPENED;
		
		// return
		return true;
	},

	execute : function(){
		// TAG ATTRIBUTES
		var attributes = {
			"id" : this.id, 
			"style": this.__attributes.style, 
			"cellpadding" : 0, 
			"cellspacing" : 0, 
			"class" : "box-container"
		};
		
		// JSON STRUCTURE
		var boxStructure = ["table", attributes, 
			["thead", 
				["tr", 
					["td", {"class" : "box-header-left"}, "&nbsp;"],
					["td", {"class" : "box-header-middle"}, 
						["span", {"class" : "box-header-buttons"},
 							["div", {"innerName" : "toggleButton", "class" : "box-up-button"}]
						],
						["span", {"class" : "box-header-text"},
							this.__attributes.title
						]
					],
					["td", {"class" : "box-header-right"}, "&nbsp;"]
				]
			], 
			["tbody",
				["tr", {"innerName" : "bodyRow"}, 
					["td", {"class" : "box-body-left"}, "&nbsp;"],
					["td", {"class" : "box-body-middle"}, 
						["div", {"class" : "box-body-middle-container", "style" : this.bodyStyle, "innerName" : "body"}, this.__innerHTML]
					],
					["td", {"class" : "box-body-right"}, "&nbsp;"]
				], 
				["tr", 
					["td", {"class" : "box-footer-left"}],
					["td", {"class" : "box-footer-middle"}],
					["td", {"class" : "box-footer-right"}]
				]
			]
		];
		
		// ELEMENT
		var box	= this.createDOM(boxStructure);
		delete boxStructure;

		// EVENTS
		syslib.event.listen('click', this.__refs.toggleButton, function(){
			this.toggleStatus();
		}.applyTo(this));

		// RETURN
		return box;
	},

	finalize : function(){
		// register this parser
		syslib.ui.Box.__parsers[this.id] = this;
		
		// close, if needed
		if(__valid(this.__attributes.closed)){ this.toggleStatus();}
		
		// return
		return true;
	}, 
	
	toggleStatus : function(){
		// check if the element is visible
		if(this.status == this._OPENED){
			// change the style
			this.__refs.toggleButton.className = "box-down-button";
			this.__refs.body.style.overflowY = "hidden";
			
			// store the last height
			this.lastHeight = this.__refs.body.offsetHeight;
			
			// set the status
			this.status = this._CLOSED;
			
			// check if the resize effect is available
			if(syslib.ui.fx.isLoaded(syslib.ui.fx.Resize)){
				syslib.ui.fx.Resize.setHeight(this.__refs.body, 5);
			} else {
				syslib.element.hide(this.__refs.body);
			}
		} else {
			// change the style
			this.__refs.toggleButton.className = "box-up-button";
			
			// set the status
			this.status = this._OPENED;
			
			// check if the resize effect is available
			if(syslib.ui.fx.isLoaded(syslib.ui.fx.Resize)){
				syslib.ui.fx.Resize.setHeight(this.__refs.body, this.lastHeight);
			} else {
				syslib.element.show(this.__refs.body);	
			}
		}
	}
});


// object containing all the created progressbars
syslib.ui.Box.__parsers = {};

syslib.ui.Box.toggleStatus = function(id){
	syslib.ui.Box.__parsers[id].toggleStatus();
};